<template>
  <div class="huabo-home flex fdc">
      <p class="home-title">{{step===1?'选择购买内容':'确认订单并支付'}}</p>
      <div class="home-content flex">
        <div class="home-content-left">
          <div v-show="step===1" class="tickabout">
            <ticket />
            <date />
            <timep />
            <numberbox />
            <trueinfobox />
          </div>
          <div v-show="step===2" class="tickabout">
            <confimeOrder/>
          </div>
          <!-- <noticebox /> -->
          <!-- <buynotice /> -->
        </div>

        <orderBox />
      </div>
  </div>
</template>

<style scoped lang="less">
.huabo-home {
  min-height: 920px;
  .home-title {
    width: 1285px;
    margin: 0 auto;
    height: 30px;
    font-size: 22px;
    font-weight: 600;
    color: #333333;
    line-height: 30px;
  }
  .home-content {
    margin: 0 auto;
    padding-top: 36px;
    padding-bottom: 64px;
    .home-content-left {
      width: 865px;
      margin-right: 32px;
      .tickabout {
        width: 865px;
        min-height: 400px;
        border-top: 1px solid #e6e6e6;
        padding-top: 32px;
        padding-bottom: 32px;
        border-bottom: 1px solid #e6e6e6;
      }
    }
  }
}
</style>

<script>
import ticket from './Ticket'
import orderBox from './Orderbox'
import numberbox from './Number'
import trueinfobox from './TrueInfo'
// import noticebox from './NoticeText'
// import buynotice from './BuyNotice'
import date from './Date'
import timep from './Time'
import confimeOrder from './ConfimeOrder'
import { mapState } from 'vuex'

export default {
  name: 'Home',
  components: {
    ticket,
    orderBox,
    numberbox,
    trueinfobox,
    // noticebox,
    // buynotice,
    date,
    timep,
    confimeOrder
  },
  computed: {
    ...mapState('ticketinfo', ['step'])
  }
}
</script>
